<template>
  <div id="main">
    <div v-if="cordova && cordova.deviceready"></div>
    <view-box>

      <x-header slot="header" :left-options="{showBack: false}">投票列表
        <a slot="right" @click="onAdd" v-if="submitVoteButtonVisibility">发布投票</a>
        <x-icon @click="onDrawer" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
      </x-header>
      <scroller lock-x scrollbar-y @on-scroll-bottom="maxNumAdd">
        <div style="padding-top:56px;">
          <card v-for="item in voteList" :key="item.id" class="vote-item-card" @click.native="go2Content(item.id)">
            <div slot="content" class="card-padding">
              <vote-flag :deadline="item.deadline" />
              <avatar :account="item.creatorAccount" :username="item.creatorUsername" :datetime="item.updatedAt" />
              <p class="vote-topic">{{ item.topic }}1</p>
            </div>
          </card>
        </div>
      </scroller>

    </view-box>

  </div>

</template>

<style lang="less">
  #main {
    height: 100%;
    background-color: #fbf9fe;
    .vux-header {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1000;
    }
    .vote-item-card {
      padding: 1rem;
      .vote-topic {
        margin-top: 0.5rem;
      }
    }
  }
</style>

<script>
  import Vue from "vue";
  import { mapGetters, mapActions, mapState, mapMutations } from "vuex";
  import {
    Scroller,
    XHeader,
    ViewBox,
    Card,
    Sticky,
    Confirm,
    TransferDomDirective as TransferDom,
    ConfirmPlugin
  } from "vux";
  import Avatar from "../components/Avatar";
  import VoteFlag from "../components/VoteFlag";
  import { TOGGLE_DRAWER } from "@/store/mutation-types";

  Vue.use(ConfirmPlugin);

  export default {
    name: "Main",
    directives: {
      TransferDom
    },
    components: {
      Scroller,
      XHeader,
      ViewBox,
      Card,
      Sticky,
      Avatar,
      VoteFlag,
      Confirm
    },
    computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
      ...mapGetters([
        "submitVoteButtonVisibility"
        // ...
      ]),
      ...mapState({
        voteList: state => state.vote.voteList
      })
    },
    data() {
      return {
        cordova: Vue.cordova,
        show: false,
        maxNum: 10,
        scrolleType: false
      };
    },
    created() {
      this.reqRefreshGetVoteListByPage({
        offset: 0,
        limit: this.maxNum
      });
      const _this = this; // 需要注意 onCancel 和 onConfirm 的 this 指向
      // alert(`Vue : created !`);
      if(typeof window.sessionStorage.bindEvent === "undefined") {
        console.log(`bind deviceready event.`);
        Vue.cordova.on("deviceready", () => {
          // alert(`Cordova : device is ready !`);
          Vue.cordova.on("backbutton", () => {
            // console.log(_this);
            console.log(_this.$route);
            if(_this.$route.name === "Main") {
              console.log(_this.show);
              // _this.show = true;
              _this.$vux.confirm.show({
                // 组件除show外的属性
                title: "提示",
                content: "退出当前APP？",
                theme: "android",
                onCancel() {},
                onConfirm() {
                  window.navigator.app.exitApp();
                }
              });
            } else {
              console.log(_this.$router);
              _this.$router.go(-1);
            }
          });
          window.sessionStorage.bindEvent = true;
        });
      }
    },
    methods: {
      ...mapActions(["reqRefreshGetVoteListByPage", "reqGetVoteListByPage"]),
      ...mapMutations([TOGGLE_DRAWER]),
      onAdd() {
        this.$router.push({
          name: "Add"
        });
      },
      maxNumAdd() {
        if(this.scrolleType) {
          // do nothing
        } else {
          this.scrolleType = true
          setTimeout(() => {
            this.maxNum += 10
            this.reqRefreshGetVoteListByPage({
              offset: 0,
              limit: this.maxNum
            });
            this.scrolleType = false
          }, 2000)
        }
      },
      go2Content(num) {
        this.$router.push({
          name: "Content",
          params: {
            voteId: num
          }
        });
      },
      onCancel() {
        console.log("on cancel");
      },
      onConfirm() {
        console.log("on confirm");
        window.navigator.app.exitApp();
      },
      onHide() {
        console.log("on hide");
      },
      onShow() {
        console.log("on show");
      },
      onDrawer() {
        this[TOGGLE_DRAWER]();
      }
    }
  };
</script>
